<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ES6类</title>
</head>
<body>
  <script>
    /* 
    需求: 
        现在2个人, 都有姓名与年龄(值自己指定), 都能自我介绍自己的姓名和年龄
        现在又有了一个学生, 它有身价的属性, 能介绍它的所有信息
    */
    /* 
    React中会使用 类语法
    关键字: class / constructor / super / extends / static
    */


    class Person {


      // 通过构造器指定实例属性
      constructor (name, age) {
        this.name = name
        this.age = age
        
        // this.fn3 = () => {
        //   console.log('fn2', this)
        // }
      }


      fn1 () {
        console.log('fn1', this)
      }

      // 类体中添加的实例属性/方法最终都是在构造器中定义的
      fn2 = function () {
        console.log('fn2', this)
      }

      fn3 = () => {
        console.log('fn2', this)
      }
    }

    const p = new Person()
    // p.fn1() // p对象
    // p.fn2() // p对象
    // p.fn3() // p对象

    const p1 = p.fn1
    const p2 = p.fn2
    const p3 = p.fn3
    // 直接调用, 且ES6类中所有方法都开启了严格模式
    p1() // undefined
    p2() // undefined
    p3() // p对象   箭头函数没有自己的this, 总是查找外部作用域中的this(也就是构造器中的this)

    // 类中的箭头函数方法中this总是类的实例

  </script>
</body>
</html>